<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人评论</title>
    <link rel="stylesheet" href="./assets/index.css" />
    <style>
        #app {
            width: 800px;
            margin: 0 auto;
        }

        .top-box-dl {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .top-box-dl .title-dl {
            font-size: 30px;
        }

        .title-dl {
            font-size: 20px;
            font-weight: bold;
        }

        .comment-list-dl {
            margin-bottom: 50px;
        }

        .comment-box-dl {
            border-bottom: 1px solid #aaa;
            margin: 10px 0;
            padding-bottom: 10px;
        }
        .comment-box-dl:last-child {
            border-bottom: none;
        }
        .comment-box-dl .box-top-dl {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }
        .box-top-dl .user-dl {
            flex-shrink: 0;
        }
        .box-top-dl .star-dl {
            flex-shrink: 0;
            margin: 0 10px;
        }
        .box-top-dl .time-dl {
            flex-shrink: 0;
            color: #999;
            font-size: 16px;
        }
        .rm-btn-dl {
            margin-left: 10px;
        }

    </style>
</head>
<body>
    <div id="app">
        <div class="top-dl">
            <div class="top-box-dl" >
                <div class="title-dl">个人中心</div>
                <div class="link-right-dl" >
                    <el-text type="primary" style="margin-right: 10px;">
                        <span>欢迎:</span>
                        <span>{{login.loginName}}</span>
                    </el-text>
                    <el-link type="primary" href="./index.html" >回到首页</el-link>
                </div>
            </div>
        </div>
        <hr>
        <div class="content-dl">
            <div class="title-dl">我的评论</div>
            <div class="comment-list-dl">
                <div class="comment-box-dl" v-for="c in arr">
                    <div class="box-top-dl">
                        <div class="user-dl">{{c.loginName}}</div>
                        <div class="star-dl">
                            <el-rate v-model="c.star" size="large" :disabled="true" ></el-rate>
                        </div>
                        <div class="time-dl">{{c.cd}}</div>

                        <!-- <el-button type="danger" text class="rm-btn-dl" @click="doRemoveComment(c.id)" >删除</el-button> -->

                        <el-popconfirm title="是否确定删除此评论？" width="190" @confirm="doRemoveComment(c.id)" confirm-button-type="danger" confirm-button-text="确定" cancel-button-text="取消" >
                            <template #reference>
                                <el-button type="danger" text class="rm-btn-dl" >删除</el-button>
                            </template>
                        </el-popconfirm>

                    </div>
                    <div class="comment-txt-dl">{{c.content}}</div>
                </div>

                <div v-if="pageNum < pages">
                    <el-button type="info" plain @click="doLoadComments" size="small">加载更多</el-button>
                </div>

            </div>
        </div>
    </div>
    <script src="./assets/vue.global.prod.js"></script>
    <script src="./assets/index.full.js"></script>
    <script src="./assets/index.iife.min.js"></script>
    <script src="./assets/axios.min.js"></script>
    <script src="./assets/film.js"></script>
    <script>
        const { createApp } = Vue;
        let app = createApp({
            data() {
                return {
                    login: {},
                    loginFlag: false,
                    pageNum: 0,
                    pageSize: 2,
                    arr: [], // 评论列表数据
                    pages: -1,
                }
            },
            methods: {
                async doLoadComments() {
                    let pn = this.pageNum;
                    pn++;
                    if (this.pages != -1 && pn > this.pages) {
                        this.$message.warning('已加载全部评论');
                        return;
                    }
                    this.pageNum = pn;
                    let params = `?pageNum=${this.pageNum}&pages=${this.pageSize}&userId=${this.login.id}`;
                    try {
                        const resp = await axios.get('/comment/findPageByUser'+params);
                        let result = resp.data;
                        console.log('result:', result);

                        let pageInfo = result.data;
                        this.pages = pageInfo.pages;
                        let list = pageInfo.list;

                        for(let i=0;i<list.length;i++){
                            let c = list[i];
                            let d = new Date(c.createDate);
                            c.cd = d.toLocaleString();
                            this.arr.push(c);
                        }
                    } catch (error) {
                        console.log('error:', error);
                    }
                },

                async doRemoveComment(cid) {
                    try {
                        const resp = await axios.get('/comment/remove?id='+cid);
                        let result = resp.data;
                        console.log(result);
                        if (result.success) {
                            this.$message.success(result.msg);
                        } else {
                            this.$message.error(result.msg);
                        }
                    } catch (error) {
                        console.log('error:', error);
                    }
                }

            },
            mounted() {
                let str = localStorage.getItem('login');
                if (null == str) {
                    this.$message.error('您还未登录');
                    return;
                }
                let login = JSON.parse(str);
                this.login = login;
                this.loginFlag = true;

                this.doLoadComments();
            },
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>